<template>
  <div>

    <div>
      <h3 v-if="!comm_admin.isAdmin" class="inline">{{ comm.comm_name }}</h3>
      <el-dropdown @command="handleCommand" v-if="comm_admin.isAdmin">
        <el-button type="primary">
          {{ comm.comm_name }}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="all">所有</el-dropdown-item>
          <el-dropdown-item v-for="comm in comms" :key="comm.cid" :command="comm"> {{
              comm.comm_name
            }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-button type="danger">阳性结果</el-button>

      <el-button @click="exportUnNCUsers">导出今日未核酸用户</el-button>


      <div class="inline date-picker">
        <el-date-picker
          v-model="date"
          type="date"
          @change="select_date"
          :picker-options="pickerOptions"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        width="100"
        label="采样人ID"
        prop="uid">
      </el-table-column>
      <el-table-column
        width="150"
        label="采样人">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>ID: {{ item_user.uid }}</p>
            <p>姓名: {{ item_user.username }}</p>
            <p>邮箱: {{ item_user.email }}
            <p>电话: {{ item_user.phone }}</p>
            <div @mouseover="onHover(scope.row.uid)" slot="reference" class="name-wrapper">
              <el-tag style="font-size: 15px;font-weight: 400">{{ scope.row.username }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="核酸地点"
        prop="position">
      </el-table-column>
      <el-table-column
        label="核酸机构"
        prop="hospital">
      </el-table-column>
      <el-table-column
        label="采样方式"
        prop="method">
      </el-table-column>
      <el-table-column
        label="采样时间"
        prop="created_time">
      </el-table-column>
      <el-table-column
        label="核酸进度"
        prop="step">
      </el-table-column>
      <el-table-column
        label="结果"
        prop="result">
        <template slot-scope="scope">
          <div slot="reference">
            <span style="color: red; font-weight: bold" v-if="scope.row.result==='阳性'">{{ scope.row.result }}</span>
            <span v-if="scope.row.result!='阳性'">{{ scope.row.result }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            :disabled="scope.row.step === '已审核'"
            @click="handlePass(scope.$index, scope.row)">通过
          </el-button>
        </template>
      </el-table-column>

    </el-table>


    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change=getNCByCid>
    </el-pagination>
  </div>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "NucleicAcidManagement",

  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,

      date: new Date(),
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }]
      },

      item_user: '',

      comm_admin: null,
      comm: {},

      comms: [],


    }
  },

  methods: {

    exportUnNCUsers() {
      if (this.comm.comm_name === '所有') {
        Message.info("请先选择社区")
        return
      }

      this.axios({
        method: "get",
        url: "/excel/getTodayNoNCUserByCid/" + this.comm.cid,
        responseType: 'blob'
      }).then(res => {
        if (res.data.code === 400) {
          Message.error(res.data.msg)
          return
        }
        const {data, headers} = res
        // console.log(res)
        // console.log(headers)
        let filename = decodeURI(headers["content-disposition"].replace('attachment;filename*=utf-8\'\'', ''))
        // console.log(filename)
        console.log(res.headers.get('content-type'))
        var blob = new Blob([data]); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
        // var blob = new Blob([data],{type: res.headers.get('content-type')});
        var downloadElement = document.createElement('a');
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      })


    },

    handleCommand(command) {

      if (command === 'all') {

        this.comm.comm_name = '所有'

        this.axios({
          method: "get",
          url: "/nuclein-form/getAllNCByDate/" + this.date + "/" + this.currentPage,
        }).then(resp => {
          if (resp) {
            if (resp.data.code == 200) {
              // console.log('请求成功')
              // console.log(resp.data.data)
              this.tableData = resp.data.data.records

              console.log(this.tableData[0])
              for (var item of this.tableData) {
                this.handleData(item)
              }

              this.currentPage = resp.data.data.current
              this.total = resp.data.data.total
              this.pageSize = resp.data.data.size
            }
          }
        })

        return
      }


      // console.log("command============="+command)
      // this.comm.comm_name = command.comm_name
      this.comm = command

      this.axios({
        method: "get",
        url: "/nuclein-form/getNCByCidAndDate/" + command.cid + "/" + this.date + "/" + this.currentPage,
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            // console.log('请求成功')
            // console.log(resp.data.data)
            this.tableData = resp.data.data.records

            console.log(this.tableData[0])
            for (var item of this.tableData) {
              this.handleData(item)
            }

            this.currentPage = resp.data.data.current
            this.total = resp.data.data.total
            this.pageSize = resp.data.data.size
          }
        }
      })

    },

    select_date() {
      // console.log(this.date)

      var cid = this.comm_admin["cid"]

      if (this.date == null) {
        this.getNCByCid(this.currentPage)
        return
      }
      this.axios({
        method: "get",
        url: "/nuclein-form/getNCByCidAndDate/" + cid + "/" + this.date + "/" + this.currentPage,
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            // console.log('请求成功')
            // console.log(resp.data.data)
            this.tableData = resp.data.data.records

            console.log(this.tableData[0])
            for (var item of this.tableData) {
              this.handleData(item)
            }

            this.currentPage = resp.data.data.current
            this.total = resp.data.data.total
            this.pageSize = resp.data.data.size
          }
        }
      })


    },

    onHover(uid) {
      // console.log(uid)
      // getBasicUserInfoById
      this.axios({
        method: "get",
        url: "/user/getBasicUserInfoById/" + uid,
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            // console.log('请求成功')
            // console.log(resp.data.data)
            this.item_user = resp.data.data
          }
        }
      })
    },
    handlePass(index, row) {
      console.log(index, row);
      this.axios({
        method: "post",
        url: "/nuclein-form/passNcByNcid/" + row.nfid,
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            // console.log('请求成功')
            // console.log(resp.data.data)
            // this.item_user = resp.data.data
            row.step = '已审核'
          }
        }
      })


    },
    handleDelete(index, row) {
      console.log(index, row);
    },

    handleData(item) {
      var date = new Date(item.created_time)
      var formatted_time = `${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分`;
      item.created_time = formatted_time
      if (item.method === 'mix') {
        item.method = '混检'
      } else {
        item.method = '单检'
      }


      if (item.result === 0) {
        item.result = '阴性'
      } else {
        item.result = '阳性'
      }


      if (item.step === 1) {
        item.step = '等待核酸结果'
      } else if (item.step === 2) {
        item.step = '等待审核'
      } else if (item.step === 3) {
        item.step = '已审核'
      }

    },

    getCommunityByUid() {
      // var user = sessionStorage.getItem("userinfo")
      // user = JSON.parse(user)
      this.axios({
        method: "get",
        url: "/comm/getCommByCommAdmin",
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.comm = resp.data.data
          }
        }
      })

    },

    getAllComms() {
      this.handleCommand('all')

      //只有最高admin才可以
      this.axios({
        method: "get",
        url: "/comm/getAllComms",
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.comms = resp.data.data
            console.log("comms" + resp.data.data)
          }
        }
      })
    },

    /*获取本社区的核酸情况*/
    getNCByCid(currentPage) {


      var user = sessionStorage.getItem("userinfo");
      user = JSON.parse(user)
      this.comm_admin = user

      var cid = this.comm_admin.cid

      this.axios({
        method: "get",
        url: "/nuclein-form/getNCByCid/" + cid + "/" + currentPage,
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            // console.log('请求成功')
            // console.log(resp.data.data)
            this.tableData = resp.data.data.records

            // console.log(this.tableData[0])
            for (var item of this.tableData) {
              this.handleData(item)
            }

            this.currentPage = resp.data.data.current
            this.total = resp.data.data.total
            this.pageSize = resp.data.data.size
          }
        }
      })
    }
  },
  created() {
    if (this.comm_admin == null || this.comm_admin.cid) {
      var user = sessionStorage.getItem("userinfo");
      user = JSON.parse(user)
      this.comm_admin = user

      console.log('转换user')
    }

    // this.getNCByCid(1)

    if (this.comm_admin.roles.some(item => item.name === 'admin')) {
      this.comm_admin.isAdmin = true
      console.log('its  admin')
      this.getAllComms()
    } else {
      this.comm_admin.isAdmin = false
      console.log('its  not admin')
      this.getCommunityByUid()
      // this.getNCByCid(1)
      this.select_date()
    }
  }
}
</script>

<style scoped>
.inline {
  display: inline-block;
}

.date-picker {
  float: right;

}
</style>
